import React, { useEffect, useState } from 'react';
import { message, Table, Tooltip } from 'antd';
import { ConnectState } from '@/pages/pricing/models/connect';
import { connect, Dispatch } from 'umi';
// import lodash from 'lodash'
import { AdjustTheRecordState } from '@/pages/pricing/type';
import styles from './index.less';
import { enumDataMode, dateTransformer } from '@/public/utils/baseTools';
// import { ColumnsType } from 'antd/lib/table';
// import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
import { adjustTheRecordTableRef } from '@/pages/pricing/models/pricingSystem/adjustTheRecordStore'


const mapStateToProps = ({ adjustTheRecordStore }: ConnectState) => {
    return {
        ...adjustTheRecordStore
    }
}




interface IAdjustTheRecordState extends AdjustTheRecordState {
    dispatch: Dispatch;
}


const AdjustTheRecord: React.FC<IAdjustTheRecordState> = (props) => {

    const columns = [
        {
            title: '商品编码',
            dataIndex: 'goodsCode',
            key: 'goodsCode',
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            key: 'goodsName',
            width: 400,
            className: styles.adjustTheRecordTable_goodsName,
            render: (text: string) => {
                return (
                    <Tooltip title={text} placement='bottomLeft'>
                        <div>{text}</div>
                    </Tooltip>
                )
            }
        },
        // {
        //     title: '最后一次采购价',
        //     dataIndex: 'lastPrice',
        //     key: 'lastPrice',
        // },
        {
            title: '调价时间',
            dataIndex: 'franchiseTime',
            key: 'franchiseTime',
            render: (text: string) => {
                return dateTransformer(Number(text), enumDataMode.FULL);
            }
        },
        {
            title: '城市',
            dataIndex: 'city',
            key: 'city',
            className: styles.adjustTheRecordTable_city,
            render: (text: string) => {
                return (
                    <Tooltip title={text} placement='bottomLeft'>
                        <div>{text}</div>
                    </Tooltip>
                )
            }
        },
        {
            title: '调前基价',
            dataIndex: 'referencePriceBefore',
            key: 'referencePriceBefore',
        },
        {
            title: '调前加价率',
            dataIndex: 'priceRateBefore',
            key: 'priceRateBefore',
        },
        {
            title: '调前配送价',
            dataIndex: 'standardPriceBefore',
            key: 'standardPriceBefore',
        },
        {
            title: '调后基价',
            dataIndex: 'referencePrice',
            key: 'referencePrice',
        },
        {
            title: '调后加价率',
            dataIndex: 'priceRate',
            key: 'priceRate',
        },
        {
            title: '调后配送价',
            dataIndex: 'standardPrice',
            key: 'standardPrice',
        },
        {
            title: '调价人',
            dataIndex: 'creator',
            key: 'creator',
        },
    ]

    const [data, setData] = useState<any>();
    const [pageInfo, setPageInfo] = useState<any>({
        pageNo: 1,
        pageSize: 10,
        totalSize: 50
    });

    useEffect(() => {
        console.log(props?.resdata)
        // let data = lodash.cloneDeep(props?.resdata)
        // console.log('object',data);
        setData(props?.resdata?.result)
        setPageInfo({
            pageNo: props?.resdata?.pageNo,
            pageSize: props?.resdata?.pageSize,
            totalSize: props?.resdata?.totalSize,
        })
    }, [props?.resdata])


    // 分页
    const changePage = (page: any, pageSize: any) => {
        props?.dispatch({
            type: 'adjustTheRecordStore/getAdjustTheRecordListquery',
            payload: {
                pageNum: page,
                pageSize: pageSize,
            }
        })
        props?.dispatch({
            type: 'adjustTheRecordStore/setQureyInfo',
            payload: {
                pageNum: page,
                pageSize: pageSize,
            }
        })
    }


    // 刷新
    const refresh = () => {
        props?.dispatch({
            type: 'adjustTheRecordStore/getNewProductListquery',
            payload: {
                pageNo: 1,
            }
        })
    }


    return (
        <div className={styles.adjustTheRecordTable}>
            <Table
                ref={adjustTheRecordTableRef}
                scroll={{ x: document.documentElement.clientWidth }}
                // rowSelection={{
                //     type: 'checkbox',
                //     ...rowSelection,
                // }}
                bordered
                loading={props?.tableLoad}
                rowKey={(record) => record?.goodsCode + record?.franchiseTime}
                columns={columns}
                dataSource={data}
                rowClassName="editable-row"
                size='small'
                pagination={{
                    current: pageInfo?.pageNo,
                    pageSize: pageInfo?.pageSize < 10 ? 10 : pageInfo?.pageSize,
                    pageSizeOptions: [10, 20, 50, 100],
                    showSizeChanger: true,
                    showQuickJumper: true,
                    total: pageInfo?.totalSize,
                    size: 'default',
                    showTotal: (total, range) => `共${total}条`,
                    onChange: changePage
                }}
            />
        </div>
    )
}

export default connect(mapStateToProps)(AdjustTheRecord)
